<template>
  <div class="loading">
    <baidu-map class="map" :center="mapCity" :zoom="mapCityZoom" :scroll-wheel-zoom="true">
      <!-- 头部菜单栏 -->
      <div class="contentFather">
        <!-- 菜单 -->
        <div class="leftContent">
          <span style="color:#409eff; width:100px" class="el-dropdown-link" v-popover:popover1>
            菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-popover ref="popover1" placement="bottom-start" width="400" trigger="click">
            <div>
              <div>区域检索</div>
              <div v-for="item in selectAddress" :key="item.name">
                <el-button type="text" @click="selectAddressBtn(item)">{{item.name}}</el-button>
              </div>
            </div>
            <div class="leftContentSearch">
              <div>搜索：</div>
              <div>
                <el-input v-model="serachTxt" placeholder="请输入内容"></el-input>
              </div>
              <div>
                <el-button type="primary" plain @click="searchBtn()">查询</el-button>
              </div>
            </div>
          </el-popover>
        </div>
        <!-- 建筑物 -->
        <div class="rightContent">
          <div class="contentChild">
            <span style="color:#409eff; width:100px" class="el-dropdown-link" v-popover:popover2>建筑物</span>
            <el-popover ref="popover2" placement="bottom-start" width="400" trigger="click">
              <div>
                <div style="margin-top:20px">
                  <el-radio-group v-model="radio1" size="medium" @change="changeJianZhu(radio1)">
                    <el-radio-button label="地标建筑物"></el-radio-button>
                    <el-radio-button label="摄像头位置"></el-radio-button>
                  </el-radio-group>
                </div>
                <div style="margin-top:20px">
                  <el-radio-group v-model="radio2" size="medium" @change="changePointer(radio2)">
                    <el-radio-button label="全部"></el-radio-button>
                    <el-radio-button label="重点建筑"></el-radio-button>
                    <el-radio-button label="非重点建筑"></el-radio-button>
                    <el-radio-button label="其他建筑"></el-radio-button>
                  </el-radio-group>
                </div>
                <div style="margin-top:20px">
                  <el-radio-group v-model="radio3" size="medium" @change="changeDuBug(radio3)">
                    <el-radio-button label="全部"></el-radio-button>
                    <el-radio-button label="已调试"></el-radio-button>
                    <el-radio-button label="调试中"></el-radio-button>
                    <el-radio-button label="未调试"></el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-popover>
          </div>
          <!-- 建筑路线 -->
          <div class="contentChild">
            <span
              style="color:#409eff; width:100px"
              class="el-dropdown-link"
              v-popover:popover3
            >建筑路线</span>
            <el-popover ref="popover3" placement="bottom-start" width="300" trigger="click">
              <div style="display: flex;justify-content: center;">
                <div>
                  <button @click="lukuang()">查看当前路况</button>
                </div>
                <div style="margin-left:20px">
                  <span style="background-color:#b40000;color:#ffffff">严重拥堵</span>
                  <span style="background-color:#e80e0e;color:#ffffff">拥堵</span>
                  <span style="background-color:#ffd045;color:#ffffff">缓行</span>
                  <span style="background-color:#4fd27d;color:#ffffff">畅通</span>
                </div>
              </div>
            </el-popover>
          </div>
          <!-- 智慧灯光 -->
          <div class="contentChild">
            <span
              style="color:#409eff; width:100px"
              class="el-dropdown-link"
              v-popover:popover4
            >智慧灯光</span>
            <el-popover ref="popover4" placement="bottom-start" width="400" trigger="click">
              <div>444444444444</div>
            </el-popover>
          </div>
          <!-- 强电管理 -->
          <div class="contentChild">
            <span
              style="color:#409eff; width:100px"
              class="el-dropdown-link"
              v-popover:popover5
            >强电管理</span>
            <el-popover ref="popover5" placement="bottom-start" width="400" trigger="click">
              <div>555555555555</div>
            </el-popover>
          </div>
          <!-- 启动仪式 -->
          <div class="contentChild">
            <span
              style="color:#409eff; width:100px"
              class="el-dropdown-link"
              v-popover:popover6
            >启动仪式</span>
            <el-popover ref="popover6" placement="bottom-start" width="400" trigger="click">
              <div>6666666666666</div>
            </el-popover>
          </div>
          <!-- 全国地图 -->
          <div class="contentChild">
            <span style="color:#409eff; width:100px" class="el-dropdown-link" v-popover:popover7>
              全国地图
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-popover ref="popover7" placement="bottom-start" width="400" trigger="click">
              <div style="width: 330px;">
                <div style="font-size:16px">
                  <b>热门城市</b>
                </div>
                <span v-for="item in hotCity" :key="item" style="margin-right:10px">
                  <el-button type="text" @click="selectAddressBtn(item)">{{item}}</el-button>
                </span>
              </div>
              <div style="font-size:16px;margin-top:20px">
                <b>搜索城市</b>
              </div>
              <div class="leftContentSearch">
                <div>
                  <el-input v-model="serachCityTxt" placeholder="请输入内容"></el-input>
                </div>
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <el-button type="primary" plain @click="searchCityBtn()">查询</el-button>
                </div>
              </div>
              <div style="font-size:16px;margin-top:20px">
                <b>全部城市</b>
              </div>
              <el-tabs v-model="activeName" type="card" style="margin-top:20px">
                <el-tab-pane label="按省份" name="first">
                  <span v-for="(items,index) in provinces.data" :key="items.result.sort">
                    <a
                      :href="'#prosort'+items.result.sort"
                      style="color:#66b1ff;text-decoration:none;margin-right:10px"
                    >{{items.result.sort}}</a>
                    <br v-if="(index+1) % 15 ===0" />
                  </span>
                  <div
                    class="provinceList"
                    style="height: 300px;overflow: hidden auto;margin-top:20px"
                  >
                    <div
                      v-for="item in provinces.data"
                      :key="item.result.sort"
                      :id="'prosort'+item.result.sort"
                    >
                      <div
                        style="font-size:20px;margin-left:0px;font-size: 24px;font-weight: 700;color: #ccc;"
                      >{{item.result.sort}}</div>
                      <div v-for="item2 in item.result.status" :key="item2.provinceName">
                        <div
                          style="font-size:16px;margin-left:10px;font-weight: 400;margin-top:10px"
                        >
                          <b>{{item2.provinceName}}</b>
                        </div>
                        <div style="margin-left:30px">
                          <span v-for="(item3, index) in item2.citys" :key="item3.citysName">
                            <span style="margin-right:10px">
                              <el-button
                                type="text"
                                @click="selectAddressBtn(item3.citysName)"
                              >{{item3.citysName}}</el-button>
                            </span>
                            <br v-if="(index+1) % 5 ===0" />
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="按城市" name="second">
                  <span v-for="(items,index) in sortcity.data" :key="items.letter">
                    <a
                      :href="'#numsort'+items.letter"
                      style="color:#66b1ff;text-decoration:none;margin-right:10px"
                    >{{items.letter}}</a>
                    <br v-if="(index+1) % 15 ===0" />
                  </span>
                  <div
                    class="provinceList"
                    style="height: 300px;overflow: hidden auto;margin-top:20px"
                  >
                    <div
                      v-for="item in sortcity.data"
                      :key="item.letter"
                      :id="'numsort'+item.letter"
                    >
                      <div
                        style="font-size:20px;margin-left:0px;font-size: 24px;font-weight: 700;color: #ccc;"
                      >{{item.letter}}</div>
                      <div style="margin-left:30px">
                        <span v-for="(item2, index) in item.list" :key="index">
                          <span style="margin-right:10px">
                            <el-button type="text" @click="selectAddressBtn(item2)">{{item2}}</el-button>
                          </span>
                          <br v-if="(index+1) % 6 ===0" />
                        </span>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-popover>
          </div>
        </div>
      </div>
      <!-- 视图 -->
      <bm-view style="width: 100%; flex: 1"></bm-view>
      <!-- 搜索 -->
      <bm-local-search
        :keyword="keyword"
        :location="location"
        :auto-viewport="true"
        :panel="false"
        :forceLocal="true"
      ></bm-local-search>
      <!-- 行政区域 -->
      <div v-if="mapCityZoom > 9">
        <div v-for="item in cityArea" :key="item.name">
          <div v-if="item.type === 'city'">
            <bm-boundary
              :name="item.name"
              :strokeWeight="2"
              :strokeColor="item.color"
              :fillOpacity="0.01"
            ></bm-boundary>
          </div>
          <div v-if="item.type === 'area'">
            <bm-boundary
              :name="item.name"
              :strokeColor="item.color"
              :strokeWeight="1"
              :fillOpacity="0.01"
              strokeStyle="dashed"
            ></bm-boundary>
          </div>
        </div>
      </div>
      <!-- 建筑标注点 -->
      <div v-if="radio1==='地标建筑物'">
        <div :v-if="mapCityZoom > 9">
          <div v-for="item in pointer" :key="item.name">
            <!-- 调试全部 -->
            <div v-if="pointerDeBug === '-1'">
              <!-- 重点建筑 -->
              <bm-marker
                v-if="item.type === pointerType1"
                :position="item.markerPoint"
                :title="item.name"
                :dragging="false"
                :icon="{url: 'http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/hong.png', size: {width: 21, height: 24}}"
                @click="markerClick(item)"
              ></bm-marker>
              <!-- 非重点建筑 -->
              <bm-marker
                v-if="item.type === pointerType2"
                :position="item.markerPoint"
                :title="item.name"
                :dragging="false"
                :icon="{url: 'http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/lv.png', size: {width: 21, height: 24}}"
                @click="markerClick(item)"
              ></bm-marker>
              <!-- 其他建筑 -->
              <bm-marker
                v-if="item.type === pointerType3"
                :position="item.markerPoint"
                :title="item.name"
                :dragging="false"
                :icon="{url: 'http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/lan.png', size: {width: 21, height: 24}}"
                @click="markerClick(item)"
              ></bm-marker>
            </div>
            <!-- 调试已调试调试中未调试 -->
            <div v-if="pointerDeBug > '-1'">
              <div v-if="item.debug === pointerDeBug">
                <bm-marker
                  v-if="item.type === pointerType1"
                  :position="item.markerPoint"
                  :title="item.name"
                  :dragging="false"
                  :icon="{url: 'http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/hong.png', size: {width: 21, height: 24}}"
                  @click="markerClick(item)"
                ></bm-marker>
              </div>
              <!-- 非重点建筑 -->
              <div v-if="item.debug === pointerDeBug">
                <bm-marker
                  v-if="item.type === pointerType2"
                  :position="item.markerPoint"
                  :title="item.name"
                  :dragging="false"
                  :icon="{url: 'http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/lv.png', size: {width: 21, height: 24}}"
                  @click="markerClick(item)"
                ></bm-marker>
              </div>
              <!-- 其他建筑 -->
              <div v-if="item.debug === pointerDeBug">
                <bm-marker
                  v-if="item.type === pointerType3"
                  :position="item.markerPoint"
                  :title="item.name"
                  :dragging="false"
                  :icon="{url: 'http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/lan.png', size: {width: 21, height: 24}}"
                  @click="markerClick(item)"
                ></bm-marker>
              </div>
            </div>
          </div>
          <!-- 信息窗体 -->
          <bm-info-window
            :position="bminfo.bmInfoPosition"
            :show="bminfo.bmInfoShow"
            @close="infoWindowClose"
            @open="infoWindowOpen"
          >
            <p v-text="'名称:'+bminfo.bmInfoTxt" style="font-size:12px"></p>
            <p v-text="'地址:'+bminfo.bmInfoAddress" style="font-size:12px"></p>
            <button @click="clear(bminfo.bmInfoPosition)">到这去</button>
            <p style="font-size:8px">(点击地图右下角定位按钮获取导航开始位置)</p>
          </bm-info-window>
        </div>
      </div>
      <!-- 摄像头点 -->
      <div v-if="radio1==='摄像头位置'">
        <div v-if="mapCityZoom>9">
          <div v-for="item in pointer" :key="item.name">
            <bm-marker
              :position="item.markerPoint"
              :dragging="true"
              animation="BMAP_ANIMATION_BOUNCE"
            ></bm-marker>
          </div>
        </div>
      </div>
      <!-- 定位 -->
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="false"
        :autoLocation="true"
        @locationSuccess="locationSuccess"
      ></bm-geolocation>
      <!-- 导航 -->
      <bm-driving :start="startPoint" :end="endPoint" :panel="false"></bm-driving>
      <!-- 交通流量预计 -->
      <div v-if="predictDate.weekday > -1">
        <bm-traffic :predictDate="predictDate"></bm-traffic>
      </div>
    </baidu-map>
    <div
      class="mapWhiteArea"
      style="background-color:#f5f5f5;width:150px;position: relative;z-index: 99;float:left;top: -150px;"
    >
      <div>
        <img
          src="http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/hong.png"
        />
        <span>重点建筑</span>
      </div>
      <div>
        <img
          src="http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/lv.png"
        />
        <span>非重点建筑</span>
      </div>
      <div>
        <img
          src="http://zepod-image.oss-cn-beijing.aliyuncs.com/%E6%BE%84%E5%9F%8E%E5%8E%BF%E5%90%8E%E5%8F%B0%E5%9B%BE/lan.png"
        />
        <span>其他建筑</span>
      </div>
    </div>
  </div>
</template>

<script>
import BMap from 'BMap'
import data1 from '../../../assets/modelData/proSortCity.json'
import data2 from '../../../assets/modelData/sortSortCity.json'
export default {
  name: 'DeviceManagement',
  data () {
    return {
      mapCity: '中国', // 默认城市
      mapCityZoom: 5, // 缩放级别
      location: '', // 检索区域 城市
      keyword: '', // 检索关键字 建筑
      serachTxt: '', // 检索关键字input
      serachCityTxt: '', // 搜索城市
      radio1: '地标建筑物', // 建筑物检索1
      radio2: '全部', // 建筑物检索2
      radio3: '全部', // 建筑物检索3
      pointer: [ // 标注点坐标
        {
          name: '中国科学院地球环境研究所',
          markerPoint: { lng: 108.89462, lat: 34.23456 },
          address: '陕西省西安市雁塔区沣惠南路12号西70米',
          type: '2',
          debug: '0'
        },
        {
          name: '乌王生发白发养发',
          markerPoint: { lng: 108.82761, lat: 34.25854 },
          address: '陕西省西安市未央区昆明路辅路',
          type: '1',
          debug: '0'
        },
        {
          name: '华东·万锦城购物中心',
          markerPoint: { lng: 108.87783, lat: 34.26789 },
          address: '西安市莲湖区汉城南路100号',
          type: '3',
          debug: '1'
        },
        {
          name: '化运菜市场',
          markerPoint: { lng: 108.86452, lat: 34.29234 },
          address: '枣园西路288号附近',
          type: '1',
          debug: '2'
        }
      ],
      pointerType1: '1', // 标注点显示条件
      pointerType2: '2', // 标注点显示条件
      pointerType3: '3', // 标注点显示条件
      pointerDeBug: '-1', // 标注点调试状态
      bminfo: { // 标注点提示框
        bmInfoShow: false,
        bmInfoPosition: null,
        bmInfoTxt: '',
        bmInfoAddress: ''
      },
      cityArea: [ // 行政区域
        {
          name: '西安市',
          type: 'city',
          color: 'blue'
        },
        {
          name: '西安市碑林区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市莲湖区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市灞桥区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市雁塔区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市阎良区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市未央区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市新城区',
          type: 'area',
          color: '#8A2BE2 '
        },
        {
          name: '西安市长安区',
          type: 'area',
          color: '#8A2BE2'
        },
        {
          name: '西安市临潼区',
          type: 'area',
          color: '#8A2BE2'
        }
      ],
      selectAddress: [ // 辖区检索
        {
          name: '莲湖区'
        },
        {
          name: '雁塔区'
        },
        {
          name: '未央区'
        },
        {
          name: '灞桥区'
        },
        {
          name: '新城区'
        }
      ],
      provinces: data1, // 省份排序检索
      sortcity: data2, // 城市排序检索
      activeName: 'first', // 标签页默认省份
      hotCity: [ // 热门城市
        '西安',
        '深圳',
        '北京',
        '上海',
        '广州',
        '辽宁',
        '徐州',
        '咸阳',
        '杭州'
      ],
      startPoint: '', // 导航开始位置
      endPoint: '', // 导航结束位置
      predictDate: { weekday: -1, hour: -1 }
    }
  },
  mounted () {
    // 读取默认城市
    this.ready()
  },
  methods: {

    // 读取默认城市
    ready () {
      console.log(this.provinces)
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition((r) => {
        this.mapCity = r.address.city
        this.mapCityZoom = 10
      }, { enableHighAccuracy: true })
    },
    // 主要区域查询
    selectAddressBtn (item) {
      if (item.name !== null && item.name !== undefined) {
        console.log(1)
        this.mapCity = this.cityArea[0].name + item.name
      } else {
        console.log(2)
        this.mapCity = item
      }
      // console.log(item)
      // this.mapCity = this.cityArea[0].name + item.name
      this.mapCityZoom = 15
    },
    // 输入框查询
    searchBtn () {
      this.keyword = this.serachTxt
      this.location = this.cityArea[0].name
      console.log(this.keyword)
      console.log(this.location)
    },
    searchCityBtn () {
      this.mapCity = this.serachCityTxt
    },
    // 标注点
    markerClick (item) {
      if (this.mapCity !== null) {
        this.bminfo.bmInfoPosition = item.markerPoint
        this.bminfo.bmInfoTxt = item.name
        this.bminfo.bmInfoAddress = item.address
        this.bminfo.bmInfoShow = true
      }
    },
    // 建筑筛选
    changeJianZhu (item) {
      this.radio1 = item
    },
    // 坐标点筛选
    changePointer (item) {
      if (item === '全部') {
        this.pointerType1 = '1'
        this.pointerType2 = '2'
        this.pointerType3 = '3'
      }
      if (item === '重点建筑') {
        this.pointerType1 = '1'
        this.pointerType2 = '-1'
        this.pointerType3 = '-1'
      }
      if (item === '非重点建筑') {
        this.pointerType1 = '-1'
        this.pointerType2 = '2'
        this.pointerType3 = '-1'
      }
      if (item === '其他建筑') {
        this.pointerType1 = '-1'
        this.pointerType2 = '-1'
        this.pointerType3 = '3'
      }
    },
    changeDuBug (item) {
      if (item === '全部') {
        this.pointerDeBug = '-1'
      }
      if (item === '已调试') {
        this.pointerDeBug = '0'
      }
      if (item === '调试中') {
        this.pointerDeBug = '1'
      }
      if (item === '未调试') {
        this.pointerDeBug = '2'
      }
    },
    // 获取坐标点
    locationSuccess (point) {
      console.log(point)
      this.startPoint = point.point
    },
    // 关闭消息框，获取坐标点
    clear (item) {
      this.endPoint = item
      console.log('item', item)
      this.bminfo.bmInfoShow = false
    },
    // 标注点消息框关闭
    infoWindowClose () {
      this.bminfo.bmInfoShow = false
    },
    // 标注点消息框打开
    infoWindowOpen () {
      this.bminfo.bmInfoShow = true
    },
    lukuang () {
      var myDate = new Date()
      var day = myDate.getDay() // 获取当前星期X(0-6,0代表星期天)
      var hours = myDate.getHours() // 获取当前小时数(0-23)
      if (this.predictDate.weekday < 0) {
        this.predictDate.weekday = day
        this.predictDate.hour = hours
        console.log('kai')
        return false
      }
      if (this.predictDate.weekday > -1) {
        this.predictDate.weekday = -1
        this.predictDate.hour = -1
        console.log('guan')
        return false
      }
    }
  }
}
</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.contentFather {
  float: left;
}
.leftContent {
  float: left;
}
.leftContentSearch {
  height: 50px;
  line-height: 50px;
}
.leftContentSearch div {
  float: left;
}

.rightContent {
  float: right;
}
.contentChild {
  float: left;
  margin-left: 40px;
}
</style>
